<script lang="ts" setup>
import { ref } from "vue";
import imgUpload from "@/components/imgUpload/index.vue";
import htmlCode from "./htmlCode.md?raw";
import demoCode from "./demoCode.md?raw";
const imgList1 = ref([
  {
    uid: "-1",
    name: "image.png",
    status: "done",
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);
const imgList2 = ref([
  {
    uid: "-1",
    name: "image.png",
    status: "done",
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);
const imgList3 = ref([
  {
    uid: "-1",
    name: "image.png",
    status: "done",
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);
const imgsrc1 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook1 = ref(false);
const lookCode1 = () => {
  islook1.value = !islook1.value;
  if (islook1.value) {
    imgsrc1.value =
      "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg";
  } else {
    imgsrc1.value =
      "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg";
  }
};
const imgsrc2 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook2 = ref(false);
const lookCode2 = () => {
  islook2.value = !islook2.value;
  if (islook2.value) {
    imgsrc2.value =
      "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg";
  } else {
    imgsrc2.value =
      "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg";
  }
};
</script>
<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-title-bold">图片上传</div>
      <a-row>
        <a-col :span="8">
          <imgUpload ref="img" :pfileList="imgList1"></imgUpload
        ></a-col>
        <a-col :span="8"
          ><imgUpload ref="img" :pfileList="imgList2"></imgUpload
        ></a-col>
        <a-col :span="8"
          ><imgUpload ref="img" :pfileList="imgList3"></imgUpload
        ></a-col>
      </a-row>
    </div>
    <div class="public-outside-title">代码展示</div>
    <div class="public-flex-box">
      <div class="public-code-icon">
        <div class="public-title-bold">图片上传组件</div>
        <img :src="imgsrc1" @click="lookCode1" al t="" />
      </div>
      <div class="public-code-con" v-if="islook1">
        <v-md-preview
          :text="htmlCode"
          preview-class="vuepress-markdown-body"
        ></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon">
        <div class="public-title-bold">使用案例</div>
        <img :src="imgsrc2" @click="lookCode2" al t="" />
      </div>
      <div class="public-code-con" v-if="islook2">
        <v-md-preview
          :text="demoCode"
          preview-class="vuepress-markdown-body"
        ></v-md-preview>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.code-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>
